<template>
  <div class="infinite-container">
   <mu-list class="bgwhite">
      <mu-list-item title="姓名">
        <mu-text-field hintText="请输入真实姓名" inputClass="text-right" hintTextClass="text-right" v-model="form.realName" slot="right" class="mt15"  :disabled="action==='modify'"></mu-text-field>
      </mu-list-item>
      <mu-divider/>

      <mu-list-item title="关系">
        <span class="list-right-title" >
            <selector :options="FAMILY_RALATION" @selectchange="handleRelationChange" :defaultValue="form.relation" v-if="canDelete"></selector>
             <span v-else class="pr10">本人</span>
          </span>
      </mu-list-item>
      <mu-divider/>

      <mu-list-item title="证件类型">
          <span class="list-right-title" >
            <selector :options="CARD_TYPE"  @selectchange="handleCardChange" :defaultValue="form.cardType" :disabled="action==='modify'"></selector>
          </span>
      </mu-list-item>
      <mu-divider/>

      <mu-list-item title="证件号码">
        <mu-text-field v-model="form.cardNumber" slot="right" type="text" class="mt15" hintText="请输入证件号码"  inputClass="text-right" hintTextClass="text-right" :disabled="action==='modify'">
        </mu-text-field>
      </mu-list-item>
      <mu-divider/>

      <mu-list-item title="性别">
        <span class="list-right-title" >
            <selector :options="SEX_TYPE" @selectchange="handleSexChange" :disabled="action==='modify'" :defaultValue="sex"></selector>
          </span>
      </mu-list-item>
      <mu-divider/>

      <mu-list-item title="出生日期">
        <mu-date-picker  v-model="bornDate" slot="right" hintText="请选择出生日期"  inputClass="text-right" hintTextClass="text-right" :disabled="action==='modify'"></mu-date-picker>
      </mu-list-item> 
      <mu-divider/>

      <mu-list-item title="手机号码">
        <mu-text-field v-model="form.phoneNumber"   type="number" slot="right" class="mt15" hintText="请输入手机号码"  inputClass="text-right" hintTextClass="text-right" :disabled="isphoneedit">
        </mu-text-field>
      </mu-list-item>
   </mu-list>

    <mu-flexbox :gutter="0" style="margin-top:4em;" v-if="this.$route.query.action !== 'modify'">
      <mu-flexbox-item grow="2"></mu-flexbox-item>
      <mu-flexbox-item grow="16">
        <mu-raised-button class="submit-btn" :class="[loginDisabled ? 'disabled' : '']" label="保存" fullWidth primary @click="submitForm"></mu-raised-button>
      </mu-flexbox-item>
      <mu-flexbox-item grow="2"></mu-flexbox-item>
    </mu-flexbox>

    <mu-flexbox :gutter="0" style="margin-top:3em;" v-if="this.$route.query.action === 'modify' && canDelete">
      <mu-flexbox-item grow="2"></mu-flexbox-item>
      <mu-flexbox-item grow="16">
        <mu-raised-button class="submit-btn delete-btn"  @click="delFamily" label="删除就诊人" fullWidth></mu-raised-button>
      </mu-flexbox-item>
      <mu-flexbox-item grow="2"></mu-flexbox-item>
    </mu-flexbox>



  <mu-dialog :open="dialog">
    此操作将永久删除该就诊人, 是否继续?
    <mu-flat-button slot="actions" @click="dialog=false" default label="取消"/>
    <mu-flat-button slot="actions" primary @click="confirmDelete" label="确定"/>
  </mu-dialog>

  <mu-dialog :open="addDialog">
    就诊人保存成功，请进行身份认证。通过身份认证绑定医院帐号可方便各项医院内服务。
    <mu-flat-button slot="actions" primary @click="addDialogHandle" label="确定"/>
  </mu-dialog>

  </div>
</template>

<script>
import {commonAjax, RESTFUL_API} from '@/api/api'
import {testEmpty, getBirthdayFromIdCard, getSexFromIdCard, testPhone} from '@/common/js/util'
import Selector from '@/components/Selector'
// import SingleSelect from '@/components/SingleSelect'
import {CARD_TYPE, FAMILY_RALATION, SEX_TYPE} from '@/api/const'

export default {
  components: {Selector},
  data () {
    return {
      dialog: false,
      addDialog: false,
      action: 'add',
      SEX_TYPE,
      CARD_TYPE,
      FAMILY_RALATION,
      canDelete: true,
      form: {
        relation: 1,
        phoneNumber: '',
        cardType: 1,
        cardNumber: '',
        realName: '',
        id: ''
      },
      disabled: {
        relation: false,
        phoneNumber: false,
        cardType: false,
        cardNumber: false,
        sex: false,
        bornDate: false
      },
      bornDate: '',
      sex: 1
    }
  },
  watch: {
    'form.cardNumber': function (val) {
      if (this.form.cardType === '1') {
        this.bornDate = getBirthdayFromIdCard(val)
        this.sex = getSexFromIdCard(val)
      }
    },
    'form.cardType': function (val) {
      if (val === '1') {
        this.bornDate = getBirthdayFromIdCard(this.form.cardNumber)
        this.sex = getSexFromIdCard(this.form.cardNumber)
      }
    }
  },
  computed: {
    loginDisabled () {
      return testEmpty(this.form.realName) || testEmpty(this.form.cardNumber) || testEmpty(this.bornDate)
    },
    isphoneedit () {
      if (this.action === 'add') {
        return false
      } else {
        if (this.form.relation === '0') {
          return true
        } else {
          return false
        }
      }
    }
  },
  mounted () {
    if (this.$route.query.action === 'modify') {
      this.action = 'modify'
      let editFamily = JSON.parse(sessionStorage.editFamily || '{}')
      if (editFamily.relation === '0') {
        this.canDelete = false
      }
      this.form = {
        relation: editFamily.relation,
        phoneNumber: editFamily.mobile,
        cardType: editFamily.cardtype,
        cardNumber: editFamily.idcard,
        realName: editFamily.realname,
        id: editFamily.id
      }
    }
  },
  methods: {
    submitForm () {
      if (this.loginDisabled) {
        return false
      }
      if (!testPhone(this.form.phoneNumber)) {
        this.$store.commit('UPDATE_TOAST', {message: '手机号格式有误，请检查'})
        return false
      }
      let params = {
        mobile: this.form.phoneNumber,
        realname: this.form.realName,
        relation: this.form.relation,
        cardtype: this.form.cardType,
        idcard: this.form.cardNumber,
        sexcode: this.sex,
        birthdate: this.bornDate
      }
      // 此处有坑：入参openid为小写， aliUid没问题
      if (this.$APP_PLATFORM === 1) {
        params.openid = sessionStorage[this.$APP_PLATFORM_NAME]
      } else {
        params[this.$APP_PLATFORM_NAME] = sessionStorage[this.$APP_PLATFORM_NAME]
      }
      let method = 'addMember'
      if (this.action === 'modify') {
        method = 'updateMember'
        params.id = this.form.id
      }
      this.$store.commit('UPDATE_LOADING')
      commonAjax(RESTFUL_API[method], params).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1) {
          this.action === 'modify' ? this.modifyHandle() : this.addHandle()
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.msg
          })
        }
      })
    },
    modifyHandle () {
      this.$store.commit('UPDATE_TOAST', {
        message: '操作成功',
        fn: () => this.$router.replace('/setting/family')
      })
    },
    addHandle () {
      this.addDialog = true
    },
    getFamilys () {
      return commonAjax(`${RESTFUL_API.listFamily}`, {[this.$APP_PLATFORM_NAME]: sessionStorage[this.$APP_PLATFORM_NAME]})
    },
    addDialogHandle () {
      this.getFamilys().then(res => {
        if (res.data.code === 1) {
          const family = res.data.data.filter(v => v.idcard === this.form.cardNumber)[0]
          sessionStorage.editFamily = JSON.stringify(family)
          this.$router.push('/setting/bind-visitcard')
        }
      })
    },
    delFamily (f) {
      if (!this.form.id) {
        return false
      }
      this.dialog = true
    },
    close () {
      this.dialog = false
    },
    handleCardChange (val) {
      this.form.cardType = val
    },
    handleRelationChange (val) {
      this.form.relation = val
    },
    handleSexChange (val) {
      this.sex = val
    },
    confirmDelete () {
      this.$store.commit('UPDATE_LOADING')
      commonAjax(`${RESTFUL_API.removeMember}`, {id: this.form.id}).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1) {
          this.$store.commit('UPDATE_TOAST', {
            message: '删除成功',
            fn: this.$router.replace('/setting/family')
          })
        } else {
          this.close()
          this.$store.commit('UPDATE_TOAST', {message: res.data.msg})
        }
      })
    }
  },
  destroyed () {
  }
}
</script>
